<%@ page language="java" contentType="text/html;charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/view/jsp/base.jsp"%>
<html lang="en">
<style>
.gradeA {
	cursor: pointer !important;
}

.widget-box tr td {
	text-align: left;
}

.mytable {
	border: 1px solid #ddd;
	background-color: transparent;
	border-collapse: collapse;
	border-spacing: 0;
}

.mytable th {
	border: 0px solid #ddd;
	padding: 8px;
	text-align: center;
}

.mytable tr {
	border: 1px solid #ddd;
}

.mytable td {
	padding: 8px;
	text-align: center;
}
.text16 {
	width:60px;
	height: 40px;
	text-align: left;
}

.text32 {
	width:120px;
	height: 40px;
	text-align: left;
}

.text64 {
	width:200px;
	height: 40px;
	text-align: left;
}


</style>
<body>
	<div id="content">
		<div id="content-header"></div>
		<div class="container-fluid">
			<div class="">
				<div class="">
					<h5>交易码信息列表</h5>
				</div>
				<form id="appMgrQueryForm" action="" method="post"
					class="form-horizontal">
					<div class+"" style="font-size: 15px; padding: 15px 5px 5px 5px;">
						<label style="display: inline">服务节点:</label> 
						<input primaryKey="true" type="text" class="text32" name="app" onkeydown="enterQuery()" placeholder="如:ibp_test_ts2" size="16"  maxlength="32" > 
						&nbsp;&nbsp;&nbsp;
						<label style="display: inline">交易描述:</label> 
						<input type="text" class="text64"	name="desc" onkeydown="enterQuery()" placeholder="如:支付宝转账交易" size="128"  maxlength="256" >
						&nbsp;&nbsp;&nbsp;
						<label style="display: inline">BIN:</label>
						<input type="text" class="text64" name="bin" onkeydown="enterQuery()" placeholder="如:ibp_test_ts2.so" size="128"  maxlength="256">
						&nbsp;&nbsp;&nbsp;
						<button id="filter" type="button" class="btn btn-info"
							style="margin-bottom: 5px; padding: 2px 5px;" onclick="query()">&nbsp;&nbsp;&nbsp;过&nbsp;滤&nbsp;&nbsp;&nbsp;</button>
					</div>
				</form>


				<table id="appMgrTable" url="" class="mytable ">
					<thead>
							<tr role="row">
								<th class="ui-state-default" role="columnheader" style=""
									name="app" primaryKey="true">交易码</th>
								<th class="ui-state-default" role="columnheader" style=""
									name="desc">交易描述</th>
								<th class="ui-state-default" role="columnheader" style=""
									name="bin">BIN</th>
								<th class="ui-state-default" role="columnheader" style=""
									name="timeout">超时时间</th>
								<th class="ui-state-default" role="columnheader" style=""
									name="timeout2">超时时间2</th>
								<th class="ui-state-default" role="columnheader" style=""
									name="server_node">服务端节点</th>
								<th class="ui-state-default" role="columnheader" style=""
									name="invalid">有效标记</th>
								<th class="ui-state-default" role="columnheader" style="" name="work-box">操作
								<a href="#" onclick="addNewRow()">&nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-plus"></span></a>&nbsp;&nbsp;&nbsp;&nbsp;</th>
							</tr>
						<tr id="editRow" role="row" style="display: none;">
							<td><input class="text32" type="text" name="app" readonly size="16"  maxlength="32"></td>
							<td><input class="text64" type="text" name="desc" size="128"  maxlength="256"></td>
							<td><input class="text64" type="text" name="bin" size="128"  maxlength="256"></td>
							<td><input class="text16" type="text" name="timeout" size="2"  maxlength="4"></td>
							<td><input class="text16" type="text" name="timeout2" size="2"  maxlength="4"></td>
							<td><input class="text32" type="text" name="server_node" size="16"  maxlength="32"></td>
							<td>
								<select  style="width: 70px; height: 30px;;" name="invalid">
									<option value="0">有效</option>
									<option value="1">无效</option>				
								</select>
							</td>
							<td class="center ">
								<a href="#" onclick="saveEdit($(this))"><span class="glyphicon glyphicon-saved"></span></a>
								 &nbsp;&nbsp;&nbsp;&nbsp;
								 <a	href="#" onclick="query()"><span class="glyphicon glyphicon-remove"></span></a>
							</td>
						</tr>
						<tr role="row" id="addRow"  style="display: none;">
							<td><input class="text32" type="text" name="app" size="16"  maxlength="32"></td>
							<td><input class="text64" type="text" name="desc" size="128"  maxlength="256"></td>
							<td><input class="text64" type="text" name="bin" size="128"  maxlength="256"></td>
							<td><input class="text16" type="text" name="timeout" size="2"  maxlength="4"></td>
							<td><input class="text16" type="text" name="timeout2" size="2"  maxlength="4"></td>
							<td><input class="text32" type="text" name="server_node" size="16"  maxlength="32"></td>
							<td>
								<select style="width: 70px; height: 30px;" name="invalid">
									<option value="0" >有效</option>
									<option value="1">无效</option>
								</select>
							</td>
							<td class="center ">
								<a href="#" onclick="saveAdd($(this))""><span class="glyphicon glyphicon-saved"></span></a>&nbsp;&nbsp;&nbsp;&nbsp;
								<a href="#" onclick="rmRow($(this))"><span class="glyphicon glyphicon-remove"></span></a>
							</td>
						</tr>
					</thead>
					<tbody id="appMgrTable-tbody" role="alert" aria-live="polite"
						aria-relevant="all">

					</tbody>
				</table>
				<p id="errorInfo" style="display: none; color:red; font-size:10px; " ></p>
				<div style="float: left;">
					<span style="width: 70px; height: 40px; margin: 2px 0 0 4px;">每页</span>
					<select id="pageSize" style="width: 65px; height: 26px; margin: 2px 0 0 4px;" onchange="query()">
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="5">5</option>
						<option value="10" selected="true">10</option>
					</select> <span style="width: 65px; height: 30px;">条</span>
				</div>
				<div id="_paging" style="float: right; margin: 2px 5px 2px 4px;"
					class="dataTables_paginate fg-buttonset ui-buttonset fg-buttonset-multi ui-buttonset-multi paging_full_numbers">
				</div>

			</div>
		</div>
	</div>
	<div id="modelDialog" class="modal fade"
		style="display: block; height: 180px;">
		<div class="modal-header">
			<a class="close" data-dismiss="modal">x</a>
			<h4>操作提示</h4>
		</div>
		<div class="modal-body">
			<h4>确认删除该项记录吗？</h4>
		</div>
		<div class="modal-footer">
			<button id="confirm" type="button" class="btn btn-success">确认</button>
			<button type="button" class="btn btn-info" data-dismiss="modal">取消</button>

		</div>
	</div>
</body>
<script type="text/javascript">		
var appsQJ=[];
$(document).ready(function(){
	query();
})	

function query(){
	removeErrInfo();
	$("#appMgrQueryForm").attr("action","<%=path%>/appMgr/getAppMgrList")
	$("#appMgrQueryForm").ajaxSubmit(function(text){																															
	    if(text.success){																																								
	    	var _data = text.data;
	    	appsQJ = _data;
			var _ths = [];      //标题行
			var _primaryKey = [] ;  //唯一索引字段				
			$("#appMgrTable").find("thead tr th").each(function(){
				var $this = $(this) ;
				_ths.push($this.attr("name"));
				if($this.attr("primaryKey")=="true"){
					_primaryKey.push($this.attr("name")) ;
				}
			});
			
 		    var pageSize = $("#pageSize").val();
			var tbody = loadData(_data,_ths,_primaryKey, pageSize);
			var $tby = $("#appMgrTable-tbody");
			$tby.html(tbody);
		}
	});
}

function loadData(data,_ths,_primaryKey, pageSize){
	var tbody = "";
 	var loopTimes;
	if(pageSize<=data.length){
		loopTimes=pageSize;
	}else{
		loopTimes=data.length;
	}
	for(var i=0;i<loopTimes;i++){
		var tr = '<tr class="gradeA ">';
		for(var index in _ths){
							if(_ths[index]!="work-box"){
								var td_text = ((data[i][_ths[index]]==null)?"":data[i][_ths[index]]);
								tr+='<td class=" " name = "'+ _ths[index]+'">' + td_text +'</td>';
							}else if(_ths[index]=="work-box"){
								tr+='<td class="center" name= "'+ _ths[index]+'">'
								tr+='<a href="#" onclick="edit($(this))"><span class="glyphicon glyphicon-pencil"></span></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" onclick="deleteApp($(this))"><span><span class="glyphicon glyphicon-remove"></span></span></a>';
								tr+='<form action="" method="post">';
								for(var key in _primaryKey){
									tr+='<input type="hidden" name="'+ _primaryKey[key] +'" value="'+ data[i][_primaryKey[key]] +'"/>';
								}
								tr+='</form>';
								tr+='</td>';
							}
						}
				 '</tr>' ;
		 tbody+=tr;	 
	}
	return tbody ;
}

function enterQuery(){
	var event = window.event || arguments.callee.caller.arguments[0];
	if(event.keyCode == 13){
		query();
	}
}

//点击编辑按钮，数据被克隆到编辑框
function edit(_this){
	var copytr=$("#editRow");//可编辑行
	var this_tr = _this.parent().parent();//当前行
	console.log(this_tr);
	var tr_data = {};//用于存当前行显示数据
	var selector = {valid:"有效", invalid:"无效"};
	this_tr.find("td").each(function(){//将当前数据封装成json格式
		tr_data[$(this).attr("name")] = $(this).text();
	});
 	this_tr.html(copytr.html());//当前行内容替换成可编辑行内容
 		this_tr.find("input").each(function(){//用前面封装好的数据填充当前行
 		var _this = $(this);
		var td_name = _this.attr("name");
		if(td_name){
			_this.val(tr_data[td_name]);
		} 
	});
 		this_tr.find("select").each(function(){//用前面封装好的数据填充当前行
 	 		var _this = $(this);
 			var td_name = _this.attr("name");
 			if(td_name){
 				
 				if(tr_data[td_name]==selector.invalid){
 					_this.val(1);
 				}
 				
 				if(tr_data[td_name]==selector.valid){
 					_this.val(0);
 				} 
 			} 
 		});
 		
}

	//删除记录																																											
	function deleteApp(_this){																																							
		$("#modelDialog").modal();
	    $("#confirm").unbind('click').click(function(){	
			var $this = $(this);
			var form = _this.siblings("form");																																		
			var _tr = _this.parent().parent();																																			
			var sib = _tr.siblings("tr").length;
			
			//关闭弹出框
			$this.siblings('[data-dismiss="modal"]').trigger('click');
			
	 		$.ajax({																																								
	 				url:"<%=path%>/appMgr/deleteApp",																																		
	 				data:form.serialize(),																																				
	 				type:"post",																																						
	 				success:function(text){																																				
							query();																																
	 				}																																									
	 		});																																										
		})	
	} 
	
	//保存编辑后的结果
 	function saveEdit(_this){
 		var this_tr = _this.parent().parent();  //获取当前行数据
 		this_tr.find("input").each(
 				function(){//用前面封装好的数据填充当前行
 		 	 		/* var _this = $(this); */
 		 			var td_value = $(this).val();
 		 			if(td_value.indexOf(" ")>=0){
 		 				alert("输入不允许有空格！")
 		 			} else{
 		 		        var $form = $("<form action='' method='post'></form>");	//动态创建一个form表单用来收集数据
 		 				
 		 		    	$form.html(this_tr.children().clone(true));  //将当前tr里面的全部内容clone(包含数据)赋予form对象
 		 		       console.log($form.serialize());
 		 		    	$.ajax({
 		 					url:"<%=path%>/appMgr/updateApp",	
 		 					type:"post",
 		 					data:$form.serialize(),
 		 					success:function(result){
 		 						query();
 		 					}
 		 				});
 		 			}
 		 		});		

	} 
	
	//保存增加的记录																																									
	function saveAdd(_this){																																										
		var $form = $("<form action='' method='post'></form>");	//动态创建一个form表单用来收集数据
		var this_tr = _this.parent().parent();  //获取当前行数据	
		$form.html(this_tr.children().clone(true));  //将当前tr里面的全部内容clone(包含数据)赋予form对象
		var appValue;
		$form.find("input").each(function(){
			if( $(this).attr("name") == "app"){
				appValue = $(this).val();
			}
		});
		var f=true;
		console.log(appsQJ);
		console.log(appValue);
	 	if(appsQJ != null){
	 		for(var i=0;i<appsQJ.length;i++){
				if(appsQJ[i]["app"] == appValue ){
					f=false;
				}
			}
	 	}
		if(f==false){
			addErrInof("交易码已存在");
			return;
		} 
		
		flag =check(this_tr);
		if(flag==-1){
			return;
		}
		
		//保存																																												
        $.ajax({
			url:"<%=path%>/appMgr/addApp",	
			type:"post",
			data:$form.serialize(),
			success:function(result){
				query();
			}
		});
	}
	
	//点击增加按钮，编辑增加内容
	function  addNewRow(){
		var newRow = $("<tr  role='row' >"+$("#addRow").html()+"</tr>");
		$("#appMgrTable-tbody").append(newRow);
	}

	//点击取消增加
	function rmRow(_this){
		_this.parent().parent().remove();
	}
	
	function checkBlock(str){
		if(str.indexOf(" ")!= -1){
			alert("输入不允许有空格！")
		}
	}
	
	function check(this_tr){
		var flag=0;
		this_tr.find("input").each(function(){
			
			if($(this).attr("name")=="server_node")
				return;
			
			if(($(this).val()=="" || $(this).val()==null) && flag==0){
				addErrInof("字段:"+$(this).attr("name")+"为空");
				$(this).css({'border-color':'red'});
				flag=1;
				return;
			}else{
				$(this).css({'border-color':'#ccc'});
			}
			
		});
		if(flag == 1){
			return-1;
		}
	}
	
	function addErrInof(errInfo){
		$("#appMgrTable").width();
		$("#errorInfo").text(errInfo);
		$("#errorInfo").css({'display':'block','margin-left':$("#appMgrTable").width()-200});
	}
	
	function removeErrInfo(){
		$("#errorInfo").text("");
		$("#errorInfo").css({'display':'none'});
	}
	
</script>
</html>

